<template>
  <view class="container">
    <view class="search-bar">
      <input class="search-input" type="text" placeholder="请输入好友或群名" v-model="searchText" />
	  <view class="search-btn" @click="search">
		  <image src="../../static/images/chat/search.png"></image>
	  </view>
    </view>
    <view class="search-result">
		<view v-if="userResult.length>0">
			<h2>用户列表</h2>
			<view v-for="(item,index) in userResult" :key="index" class="search-result-1">
				<view>
					<image class="avatar" :src="item.headImage" />
				</view>
				<view >
					<text>{{ item.nickName }}</text>
					<!-- <text class="id">{{ item.id }}</text> -->
				</view>
				<view>
					<image class="add-btn"src="../../static/images/chat/add_friend1.png" @click="addFriendOrGroup"></image>
				</view>
			</view>
		</view>
		
		<view v-if="groupResult.length>0">
			<h2>群列表</h2>
			<view v-for="(item,index) in groupResult" :key="index" class="search-result-2">
				<view>
					<image class="avatar" :src="item.headImage" />
				</view>
				<view >
				  <text>{{ item.groupName }}</text>
				</view>
				<view>
					<image class="add-btn"src="../../static/images/chat/add_friend1.png" @click="addFriendOrGroup"></image>
				</view>
			</view>
		</view>
	</view>
	

    
  </view>
</template>

<script>
import {addFriendUser, listUser} from "../../api/chat/user";
import {listGroup} from "../../api/chat/group";

export default {
  data() {
    return {
      searchText: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },region: '1',
      userResult: [],
      groupResult: []

    };
  },
  methods: {
    async search() {
      // 根据输入的搜索文本进行搜索，获取搜索结果
      // 这里假设搜索结果为一个对象，包含name、id和avatar属性

      //查询用户
      this.queryParams.nickName=this.searchText
      this.userResult = (await listUser(this.queryParams)).rows
      //查询群
      this.queryParams.groupName=this.searchText
      this.groupResult = (await listGroup(this.queryParams)).rows
      console.info(this.userResult)
      console.info(this.groupResult)

    },
    async addFriend(){
      let userResult = await addFriendUser(1,2,"haoyou")

    },
    addFriendOrGroup() {
      // 添加好友或群的逻辑
      // 可以根据searchResult中的id判断是添加好友还是群
      if (this.searchResult) {
        if (this.searchResult.id.startsWith('g')) {
          // 添加群的逻辑
          console.log('添加群', this.searchResult.id);
        } else {
          // 添加好友的逻辑
          console.log('添加好友', this.searchResult.id);
        }
      }
    },
  },
};
</script>

<style>
.container {
  /* padding: 20rpx; */
}

.search-bar {
  display: flex;
  align-items: center;
  padding-top: 20rpx;
  margin-bottom: 20rpx;
  background-color: white;
}

.search-input {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1px solid #ccc;
  border-radius: 30rpx;
}

.search-btn {
  height: 60rpx;
  width: 60rpx;
  color: #fff;
  border: none;
  border-radius: 30rpx;
  margin-left: 20rpx;
}
.search-btn image{
	width: 100%;
	height: 100%;
}

.search-result {
  /* display: flex;
  align-items: center; */
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
.search-result>view{
	/* background-color: #6bfffb; */
}
.search-result-1,.search-result-2{
	background-color: #f5f5f5;
	position: relative;
}
.search-result-1>view,.search-result-2>view{
	display: inline-block;
	/* width: 80rpx; */
	height: 80rpx;
	vertical-align: top;
	line-height: 80rpx;
	margin: 20rpx 0 20rpx 0;
	font-size: 40rpx;
}
/* .search-result-1 text,.search-result-2 text{
	height: 100%;
	line-height: 100%;
} */
.search-result-1>view:nth-child(3),.search-result-2>view:nth-child(3){
	position: absolute;
	right: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 100%;
  border-radius: 50%;
  margin-right: 20rpx;
}


.add-btn {
  width: 80rpx;
  height: 100%;
  border: none;
  border-radius: 30rpx;
  margin-left: 20rpx;
}
</style>